<script setup>
import {ref, onMounted, toRefs, watch} from "vue";
import { prop } from './props'
import { getLunarDate } from 'chinese-days'
import { constsetCalendarData, parseDateTime,getDiffDay } from '@/common/index.js'
import WIcon from "../../w-icon.vue";

const weeks = ['周日','周一','周二','周三','周四','周五','周六']
const date = ref(new Date())
const originDate = ref([]) // 天数数据
const calendar = ref({}) // 日历对象
const wid = ref(0)
const startLocalDate = ref(new Date())
const endLocalDate = ref(new Date().setDate(new Date().getDate() + 3))

const props = defineProps({
  ...prop
})

const { modelValue,isMultiple,startDate,outDate, step } = toRefs(props)
const emit = defineEmits(['update:modelValue','change'])

watch(() => modelValue.value, () => {
  date.value = new Date(modelValue.value)
  const { originData, calendarProps } = constsetCalendarData(new Date(date.value))
  originDate.value = originData
  calendar.value = calendarProps.target
})

watch(() => startDate.value, () => {
  startLocalDate.value = startDate.value
})

watch(() => outDate.value, () => {
  endLocalDate.value = outDate.value
})

const selectDate = (dateObj) => {
  if(isMultiple.value) {
    const selectDate = new Date(dateObj)
    const sDate = new Date(startLocalDate.value)
    if(selectDate.getTime() <= sDate.getTime()) {
      const totalDay = getDiffDay(parseDateTime(selectDate , 'yyyy-MM-dd'), parseDateTime(endLocalDate.value , 'yyyy-MM-dd'))

      if(totalDay + 1 > step.value) return;
      startLocalDate.value = selectDate
    }else {
      const totalDay = getDiffDay(parseDateTime(sDate , 'yyyy-MM-dd'), parseDateTime(selectDate , 'yyyy-MM-dd'))

      if(totalDay + 1 > step.value) return;
      endLocalDate.value = selectDate
    }
    emit('change' , parseDateTime(startLocalDate.value , 'yyyy-MM-dd'), parseDateTime(endLocalDate.value , 'yyyy-MM-dd'))
    return
  }
  emit('update:modelValue' , dateObj)
  emit('change' , parseDateTime(dateObj , 'yyyy-MM-dd'))
}

const switchYear = (type) => {
  if(type === 'next') {
    date.value.setFullYear(date.value.getFullYear() + 1)
  }else {
    date.value.setFullYear(date.value.getFullYear() - 1)
  }
  const { originData, calendarProps } = constsetCalendarData(date.value)
  originDate.value = originData
  calendar.value = calendarProps.target
}

const switchMonth = (type) => {
  const month = new Date(date.value).getMonth()
  if(type === 'next') {
    if(month === 12) {
      date.value.setMonth(1)
    }else {
      date.value.setMonth(month + 1)
    }
    const { originData, calendarProps } = constsetCalendarData(date.value)
    originDate.value = originData
    calendar.value = calendarProps.target
    return
  }
  if(month === 1) {
    date.value.setFullYear(date.value.getFullYear() - 1)
    date.value.setMonth(12)
  }else {
    date.value.setMonth(month - 1)
  }
  const { originData, calendarProps } = constsetCalendarData(date.value)
  originDate.value = originData
  calendar.value = calendarProps.target
}

const IsToDay = (dateObj) => {
  const dates = new Date(dateObj)
  if(!isMultiple.value) {
    const today = new Date(date.value).toLocaleDateString()
    if(today === dates.toLocaleDateString()) {
      return 'today'
    }
    return ''
  }
  const sDate = new Date(startLocalDate.value)
  const oDate = new Date(endLocalDate.value)
  if(sDate.toLocaleDateString() === dates.toLocaleDateString()) {
    return 'startDate-day'
  }
  if(oDate.toLocaleDateString() === dates.toLocaleDateString()) {
    return 'outDate-day'
  }
  sDate.setHours(0,0,0,0)
  oDate.setHours(0,0,0,0)
  if(sDate.getTime() < dates.getTime() && oDate.getTime() > dates.getTime()) {
    return 'startDate-outDate'
  }
}
const IsMonth = (row) => {
  if(row.dateType === 'previous') {
    return 'calendar-item-previous'
  }
  if(row.dateType === 'next') {
    return 'calendar-item-next'
  }
  return 'calendar-item-row'
}

onMounted(() => {
  if(modelValue.value) {
    date.value = new Date(modelValue.value)
  }
  const { originData, calendarProps } = constsetCalendarData(date.value)
  originDate.value = originData
  calendar.value = calendarProps.target

  wid.value = document.querySelector('.b-calender-main').clientWidth
  window.addEventListener('resize', () => {
    wid.value = document.querySelector('.b-calender-main').clientWidth
  })
})
</script>

<template>
  <div class="b-calendar">
    <div class="b-calendar-header">
      <div class="prev-year" @click="switchYear">
        <w-icon name="arrow-dot-left" size="18"/>
      </div>
      <div class="prev-month" @click="switchMonth">
        <w-icon name="arrow-left" size="12"/>
      </div>
      <div class="calendar-t1" @click="switchMonth">
        {{ `${calendar.year}年${calendar.month+1}月` }}
      </div>
      <div class="next-month" @click="switchMonth('next')">
        <w-icon name="arrow-right" size="13"/>
      </div>
      <div class="next-year" @click="switchYear('next')">
        <w-icon name="arrow-dot-right" size="18"/>
      </div>
    </div>
    <div class="b-calender-week">
      <div
        v-for="(item,index) in weeks"
        :key="index"
        class="week-item"
      >
        {{ item }}
      </div>
    </div>
    <div class="b-calender-main" :style="{'--width': wid / 1.2 +'px'}">
      <div
        v-for="(item,index) in originDate"
        :key="index"
        class="calendar-item"
      >
        <div
          v-for="(row,key) in item"
          :key="key"
          :class="`${IsMonth(row)} ${IsToDay(row.dateObj)}`"
          @click="selectDate(row.dateObj)"
        >
          <span class="calendar-t2">{{ row.dateNumber }}</span>
          <span class="calendar-t3">{{ getLunarDate(row.dateObj).lunarDayCN }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.b-calendar {
  width: 100%;
  &-header {
    width: 100%;
    height: 40px;
    @include flexCenter;
    box-sizing: border-box;
    padding: 0 16px;
    position: relative;
  }
}
.b-calender-week {
  width: 100%;
  height: 30px;
  @include flexCenter;
}
.week-item {
  width: calc(100% / 7);
  font-size: 10px;
  letter-spacing: 1px;
}
.b-calender-main {
  width: 100%;
  height: var(--width);
}
.calendar-item {
  width: 100%;
  height: calc(100% / 6);
  display: flex;
}
.calendar-item-row {
  @include calendarItemStyle;
  &:hover {
    &:after {
      content: '';
      width: 100%;
      height: 100%;
      border: 2px solid $bwy-primary-color;
      border-radius: 6px;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.calendar-item-previous {
  @include calendarItemStyle;
  color: $bwy-text-color-1;
  cursor: no-drop;
}
.calendar-item-next {
  @include calendarItemStyle;
  color: $bwy-text-color-1;
  cursor: no-drop;
}

.today {
  color: #fff;
  background: $bwy-primary-color;
}
.startDate-day {
  color: #fff;
  background: $bwy-primary-color;
  border-radius: 6px 0 0 6px;
}
.outDate-day {
  color: #fff;
  background: $bwy-primary-color;
  border-radius: 0 6px 6px 0;
}
.startDate-outDate {
  color: $bwy-primary-color;
  background: rgb(216.8, 235.6, 255);
  border-radius: 0;
}

.calendar-t1 {
  font-size: 16px;
  color: $bwy-primary-text-color;
  letter-spacing: 1.5px;
}
.calendar-t3 {
  font-size: 8px;
  letter-spacing: 1px;
  position: absolute;
  bottom: 4px;
}
.prev-year {
  cursor: pointer;
  position: absolute;
  left: 8px;
}
.prev-month {
  cursor: pointer;
  position: absolute;
  left: 34px;
}
.next-year {
  cursor: pointer;
  z-index: 1;
  position: absolute;
  right: 8px;
}
.next-month {
  cursor: pointer;
  position: absolute;
  right: 34px;
}
</style>
